<template>
  <div class="example">组件内容1</div>
  <div class="example2">组件内容2</div>
  <div class="new-class-3">组件内容3</div>
  <div  class="example4">组件内容4</div>
</template>
<style scoped lang="less">
// 7.1. 引入公共样式
// @import "@/assets/css/base.less";

// 1.1. 定义变量(全局变量)
@redColor: red;
// 1.2. 定义变量（属性名）
@bg-col: background-color;
// 1.3. 定义类名
@nCls: new-class-3;
.example {
  color: @redColor;
  @{bg-col}: green; // 2. 使用属性名变量
}
.example2 {
  background-color: @redColor; // 1. 使用变量
  height: 100px;
}
.@{nCls} {  // 3. 使用类名变量
  color: blue;
}
.example4 {
  color: @primary-color;
  font-size: @font-size-base;
}
</style>